<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="提交账号：">
          <el-input
            v-model="formInline.merchantName"
            placeholder="商户账户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属业务：">
          <el-select v-model="formInline.businessType" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="商家入驻" value="1"></el-option>
            <el-option label="提现审核" value="2"></el-option>
            <el-option label="资产增发" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <ex-table
            ref="table"
            :loading="loading"
            :table-column="tableColumn"
            :table-data="tableData"
            @pageSizeChange="handleSizeChange"
            @currentPageChange="handleCurrentChange"
          >
            <template v-slot:operate="{ scope }">
              <el-button @click="lookDetail(scope.row.businessTypeDict,scope.row.businessRelevance,scope.row.merchantName)">立即处理</el-button>
            </template>
          </ex-table>
        </el-tab-pane>
        <el-tab-pane label="待处理" name="second">
          <ex-table
            ref="table"
            :loading="loading"
            :table-column="tableColumn"
            :table-data="tableData"
            @pageSizeChange="handleSizeChange"
            @currentPageChange="handleCurrentChange"
          >
            <template v-slot:operate="{ scope }">
              <el-button @click="lookDetail(scope.row.businessTypeDict,scope.row.businessRelevance,scope.row.merchantName)">立即处理</el-button>
            </template>
          </ex-table>
        </el-tab-pane>
        <el-tab-pane label="已处理" name="third">
          <ex-table
            ref="table"
            :loading="loading"
            :table-column="tableColumn"
            :table-data="tableData"
            @pageSizeChange="handleSizeChange"
            @currentPageChange="handleCurrentChange"
          >
            <template v-slot:operate="{ scope }">
              <el-button @click="lookDetail(scope.row.businessTypeDict,scope.row.businessRelevance,scope.row.merchantName)">立即处理</el-button>
            </template>
          </ex-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <detail-dialog
      v-if="detailDialog"
      :id="id"
      :name="name"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import { getlist } from "@/api/index";
import handlePageMixin from '@/mixins/handlePageMixin'
import DetailDialog from './components/DetailDialog'
export default {
  name: "TodoCenter",
  components: {
    DetailDialog
  },
  mixins: [handlePageMixin],
  data() {
    return {
      id:'',
      detailDialog: false,
      changeIndex: 0,
      loading: false,
      formInline: {
        merchantName: "", //商户名称
        businessType: "", //任务类型 "1":"商家入驻","2"："提现审核"  ,"3":"增发申请"
      },
      date: [],
      activeName: "first",
      tablelist: ["全部", "待处理", "已处理"],
      status: "", //处理状态 1：待处理 2：已处理
      startTime: "", //开始时间
      endTime: "", //结束时间
      pageSize: 10,
      tableData: [],
      tableColumn: [
        { prop: "jobNo", label: "任务编号" },
        { prop: "jobName", label: "任务名称", width: 240 },
        { prop: "businessTypeDict", label: "所属业务", width: 120 },
        { prop: "costTime", label: "已耗时", width: 120 },
        { prop: "statusDict", label: "状态", width: 120 },
        { prop: "merchantName", label: "提交账号" },
        { prop: "createTime", label: "创建时间", width: 180 },
        { label: "操作", slot: true, slotName: "operate" },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onSubmit() {
      console.log(this.date)
      if(this.date==null){
        this.startTime = '';
        this.endTime = '';
      }else{
        this.startTime = this.date[0];
        this.endTime = this.date[1];
      }
      
      console.log(this.formInline);
      this.pageOptions.pageNum = 1
      this.getList();
    },
    reset() {
      this.formInline.merchantName = "";
      this.formInline.businessType = "";
      this.status = "";
      this.date = [];
      this.startTime = "";
      this.endTime = "";
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    handleClick(tab, event) {
      console.log(tab.index);
      let index = tab.index;
      if (index == 0) {
        this.status = "";
      } else if (index == 1) {
        this.status = 1;
      } else {
        this.status = 2;
      }
      this.pageOptions.pageNum = 1
      this.getList();
    },
    lookDetail(e,id,name) {
      console.log(e,id);
      if(e=='商家入驻'){
        this.$router.push({ path: "/merchants/Merchantslist" });
      }else if(e=='提现审核'){
        this.$router.push({ path: "/moneyManagement/withdrawal-list" });
      }else if(e=='开通收款功能'){
        this.$router.push({ path: "/moneyManagement/moneyAccount-list" });
      }else{
        this.id = id
        this.name = name
        console.log(this.id,this.name)
        this.detailDialog = true
      }
    },
    getList() {
      const params = {
        ...this.pageOptions,
        merchantName: this.formInline.merchantName,
        businessType: this.formInline.businessType,
        status: this.status,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      console.log(params)
      //代办任务列表
      this.loading = true;
      getlist(params).then((res) => {
        const { total, records } = res.result
        this.tableData = records;
        this.$refs.table.pageOptions.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    _handleSuccess() {
      this.getList()
    }
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
</style>
